<template>
	<div class="wrap">
		<h1 class="title">假期管理</h1>
		<el-row>
			<el-space :size="30">
				<el-form-item label="楼栋：">
					<el-input v-model.number="condition.buildId" />
				</el-form-item>
				<el-form-item label="寝室号：">
					<el-input v-model.number="condition.dorNumber" />
				</el-form-item>
				<el-form-item label="学生姓名：">
					<el-input v-model.trim="condition.stuName" />
				</el-form-item>
				<el-form-item label="学生学号：">
					<el-input v-model.number="condition.stuId" />
				</el-form-item>
				<el-form-item label="在校情况">
					<el-select v-model="condition.status" placeholder="请选择">
						<el-option label="在校" value="在校" />
						<el-option label="离校" value="离校" />
						<el-option label="请选择" value="" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button class="btn" @click="handleSearch"
						><el-icon><Search /></el-icon> 搜索</el-button
					>
				</el-form-item>
				<el-form-item>
					<el-button class="btn" @click="resetSearch"> 重置</el-button>
				</el-form-item>
			</el-space>
		</el-row>

		<div class="table">
			<el-table
				:data="hoildayInfo"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="stuName" label="姓名" />
				<el-table-column prop="stuId" label="学号" />
				<el-table-column prop="dorNumber" label="寝室号" />
				<el-table-column prop="buildId" label="楼栋号" />
				<el-table-column prop="holReason" label="申请理由" />
				<el-table-column prop="holApply" label="申请状态">
					<template #default="{ row }">
						<span :style="hanndleStyle(row)">{{ row.holApply }}</span>
					</template>
				</el-table-column>
				<el-table-column label="申请时间">
					<template #default="{ row }">
						{{ new Date(row.holTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column
					prop="holStatus"
					label="假期去向"
					sortable
					:filters="[
						{ text: '在校', value: '在校' },
						{ text: '离校', value: '离校' },
					]"
					:filter-method="filterHandler">
					<template #default="{ row }">
						<span :style="{ color: row.holStatus == '离校' ? 'red' : '#95d475' }">{{ row.holStatus }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
	getAllHol,
	getAllHolBuild,
	getHolBuildRoom,
	getHolOneStu,
	getHolOn,
	getHolLeave,
	getHolBuildOn,
	getHolBuildLeave,
} from '@/utils/axios/master'
import { debounce } from '@/utils/tools'
import { Search } from '@element-plus/icons'
import { getHolAll, getHolOneBuild } from '@/utils/axios/getTotal'

import useRegStore from '@/stores/useReg'

const { handleCheckId } = useRegStore()
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])

// 搜索条件
const condition = reactive({
	buildId: '',
	dorNumber: '',
	stuId: '',
	stuName: '',
	status: '',
})

const hoildayInfo = ref([])

//假期条数
const total = ref(0)

// 处理申请留校状态颜色
const hanndleStyle = (row) =>
	row.holApply == '申请中'
		? { color: '#eebe77' }
		: row.holApply == '已同意留校'
		? { color: '#95d475' }
		: { color: '#f89898' }

// 重置搜索条件
const resetSearch = () => Object.assign(condition, { buildId: '', dorNumber: '', stuId: '', stuName: '', status: '' })

/* 
    搜索优先级 由高到低：
    1. 按照姓名或学号查询
    2. 按楼栋和寝室号查询
    3. 按楼栋号和学生假期去向查询
    4. 只按楼栋查询
    5. 只按照学生假期状态查询
*/
// 处理搜索申请
const handleSearch = debounce(async () => {
	let { buildId, dorNumber, stuId, stuName, status } = condition
	let data = []
	// 4.管理员查看某个学生的假期情况
	if (stuId || stuName) {
		stuId == ''
			? ({ data } = await getHolOneStu({ stuId: 0, stuName }))
			: ({ data } = await getHolOneStu({ stuId: Number.parseInt(stuId), stuName }))
	} else if (buildId) {
		// 3.查看某楼栋某寝室的假期情况
		if (dorNumber)
			({ data } = await getHolBuildRoom({ buildId: Number.parseInt(buildId), dorNumber: Number.parseInt(dorNumber) }))
		else if (status)
			status === '离校'
				? ({ data } = await getHolBuildLeave({ currentPage: currentPage.value })) //8.查看某楼栋离校学生信息
				: ({ data } = await getHolBuildOn({ currentPage: currentPage.value }))
		// 7.查看某楼栋在校学生信息
		else {
			;({ data } = await getAllHolBuild({ currentPage: currentPage.value, buildId: Number.parseInt(buildId) })) // 2.查看某楼栋所有的学生假期情况
			let res = await getHolOneBuild({ buildId: parseInt(buildId) })
			total.value = res.data
		}
	} else if (status)
		status === '离校'
			? ({ data } = await getHolLeave({ currentPage: currentPage.value })) // 5.查看所有楼栋在校学生信息
			: ({ data } = await getHolOn({ currentPage: currentPage.value }))
	// 6.查看所有楼栋离校学生信息
	else ({ data } = await getAllHol({ currentPage: currentPage.value }))

	hoildayInfo.value = data
})
// 处理分页页面大小变化
const handleSizeChange = async (val) => {
	let { data } = await getAllHol({ currentPage: currentPage.value, pageSize: val })
	hoildayInfo.value = data
}
// 处理当前页变化
const handleCurrentChange = async (val) => {
	let { data } = await getAllHol({ currentPage: val, pageSize: pageSize.value })
	hoildayInfo.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

const filterHandler = (value, row, column) => {
	const property = column['property']
	return row[property] === value
}

onMounted(async () => {
	let { data } = await getAllHol({ currentPage: currentPage.value })
	hoildayInfo.value = data
	let res = await getHolAll()
	total.value = res.data
})
</script>

<style scoped lang="scss">
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.header {
	margin-bottom: 20px;
}

.el {
	&-space {
		width: 100%;
		align-items: center;
	}
	&-select {
		width: 100px;
	}
	&-input {
		width: 120px;
	}
}
</style>
